<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <!-- <template #pulling="props">
      <img
        class="doge"
        src="@/assets/image/CircleOfFriendsView/circle.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template> -->

    <!-- 释放提示 -->
    <template #loosing>
      <img class="doge" src="@/assets/image/CircleOfFriendsView/circle.png" />
    </template>
    <!-- 加载提示 -->
    <template #loading>
      <img class="doge" src="@/assets/image/CircleOfFriendsView/circle.png" />
    </template>

    <div class="circle">
      <nav v-show="showImg">
        <div class="right" @click="back">&lt;</div>
        <div class="img">
          <img
            v-on:click="showChoose"
            @touchstart="gtouchstart()"
            @touchmove="gtouchmove()"
            @touchend="showDeleteButton()"
            src="@/assets/image/CircleOfFriendsView/white.png"
          />
        </div>
      </nav>
      <!-- <div class="bg" @click="change"></div> -->
      <div
        class="test-img-box"
        @click="clickImg()"
        @touchmove.prevent
        @mousewheel.prevent
      >
        <div v-if="showBac" class="test-bac"></div>
        <img
          class="test-img"
          :style="showBac ? imgStyle : ''"
          src="@/assets/image/CircleOfFriendsView/bg.webp"
        />
        <div class="changePhoto" v-show="!showImg">
          <div><img src="@/assets/image/CircleOfFriendsView/photo.png" /></div>
          <div class="text">换封面</div>
        </div>
      </div>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
      />
      <div class="user" v-show="showImg">
        <h3>百度女孩</h3>
        <img src="@/assets/image/CircleOfFriendsView/test.jpg" />
      </div>
      <div class="container">
        <!-- 发朋友圈的内容 -->
        <div class="clerk">
          <div class="img">
            <img src="@/assets/image/CircleOfFriendsView/test.jpg" />
          </div>
          <div class="lists">
            <h3>百度女孩</h3>
            <p>
              咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？咦咦咦咦？？？？
            </p>
            <div class="more">
              <span @click="showdots">..</span>
              <!-- <span @click="showdots" tabindex="1" @blur="handleBlur">..</span> -->
              <transition>
                <div class="morelist" v-show="dots">
                  <!-- 爱心 -->
                  <div class="item">
                    <canvas id="cvs"></canvas>
                  </div>
                  <div class="star" @click="canvas">
                    <svg
                      @click="love()"
                      t="1639040689615"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2330"
                      :class="{ like: active === true }"
                    >
                      <path
                        d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z"
                        p-id="2331"
                        id="heart"
                      ></path>
                    </svg>
                    <p>赞</p>
                  </div>

                  <!-- 评论 -->
                  <div class="commen">
                    <van-icon name="chat-o" size="20" color="#fff" />
                    <p>评论</p>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import LikeHeart from "./flutter-hearts-zmt.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      width: 175, //初始宽度
      height: 400, //初始高度
      heartList: [], //初始数组
      heartCount: 0, //累加计数初始值
      active: false,
      dots: false,
      isLoading: false,
      showImg: true,
      showPopover: false,
      show: false,
      actions: [
        { name: "拍摄", subname: "照片或视频" },
        { name: "从相册选择" },
      ],
      showBac: false,
      imgStyle: "margin: 35% 0; ", //就是上下外边距加图片高等于背景图片的高度或相似就行
    };
  },
  created() {
    this.onRefresh();
  },
  methods: {
    handleBlur() {
      // 对失去焦点的监听
      this.dots = false;
    },
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },
    clickImg() {
      this.showBac = !this.showBac;
      this.showImg = !this.showImg;
    },
    showChoose() {
      this.show = true;
    },
    //长按事件（起始）
    gtouchstart() {
      var self = this;
      this.timeOutEvent = setTimeout(function () {
        self.longPress();
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    showDeleteButton() {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（如onclick事件）
        console.log("点击但未长按");
        //  this.show = !this.show;
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress() {
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      console.log("长按");
      this.$router.push("/publish");
    },
    back() {
      this.$router.go(-1);
    },
    showdots() {
      this.dots = !this.dots;
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    getRandomDis() {
      if (Math.random() > 0.5) {
        return -(Math.random() * 43);
      } else {
        return +(Math.random() * 43);
      }
    },
    createHeart() {
      this.heartCount++;
      let positionArray = [
        {
          x: 100,
          y: 400,
          endX: 100,
          endY: 100,
        },
      ];
      let img = new Image();
      // img.src = "../../static/img/" + Math.ceil(Math.random() * 2) + ".png";
      img.src = require(`../assets/image/CircleOfFriendsView/love.png`);
      let p1 = {
        x: 400 + this.getRandomDis(),
        y: 100 + this.getRandomDis(),
      };
      let p2 = {
        x: 300 + this.getRandomDis(),
        y: 200 + this.getRandomDis(),
      };
      return new LikeHeart({
        id: this.heartCount,
        x: positionArray[0].x,
        y: positionArray[0].y,
        endX: positionArray[0].endX,
        endY: positionArray[0].endY,
        onFadeOut: this.removeItem,
        noAngel: true, //决定是否从小到大
        // noScale: true,//决定是否左右摆动
        width: 40, //决定心的大小
        height: 40,
        image: img,
        bezierPoint: {
          p0: {
            x: positionArray[0].x,
            y: positionArray[0].y,
          },
          p1: p1,
          p2: p2,
          p3: {
            x: positionArray[0].endX,
            y: positionArray[0].endY,
          },
        },
      });
    },
    removeItem(item) {
      var array = [];
      for (var i = 0; i < this.heartList.length; i++) {
        if (this.heartList[i].id !== item.id) {
          array.push(this.heartList[i]);
        }
      }
      this.heartList = array;
    },
    love() {
      this.active = true;
      console.log(123);
    },
    canvas() {
      // 飘心
      var _this = this;
      var ctx = document.getElementById("cvs").getContext("2d");
      (ctx.canvas.width = _this.width),
        (ctx.canvas.height = _this.height),
        (function loop() {
          ctx.clearRect(0, 0, _this.width, _this.height);
          _this.heartList.forEach(function (item) {
            item && item.move(ctx);
          });
          requestAnimationFrame(loop);
        })();
      let interval = setInterval(function () {
        _this.heartList.push(_this.createHeart());
        //clearInterval(interval);
      }, 150);
      setInterval(function () {
        clearInterval(interval);
      }, 1500);
      document.getElementById("cvs").addEventListener(
        "click",
        function () {
          console.log(111111);
          _this.heartList.push(_this.createHeart());
        },
        false
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.doge {
  width: 40px;
  height: 40px;
  animation: fadenum 1s infinite;
  //   margin-top: 8px;
  // border-radius: 4px;
}
@keyframes fadenum {
  100% {
    transform: rotate(360deg);
  }
}
.circle {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.845);
  padding-bottom: 30px;

  nav {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 45px;
    // background-color: bisque;
    line-height: 45px;
    color: #fff;
    background-color: transparent;

    .right {
      float: left;
      font-size: 20px;
      margin-left: 15px;
    }

    .img {
      display: flex;
      float: right;
      height: 45px;
      img {
        margin: auto 15px;
        width: 30px;
        height: 30px;
      }
    }
  }
  .test-img-box {
    .test-img {
      width: 100%;
      position: absolute;
      top: 0;
      margin: auto;
    }

    .test-bac {
      position: relative;
      top: -45px;
      width: 100%;
      height: 700px;
      background: url("@/assets/image/CircleOfFriendsView/bg.webp");
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: center;
      filter: blur(5px);
    }
  }

  //   .bg {
  //     position: relative;
  //     top: -45px;
  //     left: 0;
  //     width: 100%;
  //     min-height: 300px;
  //     background-color: antiquewhite;
  //   }

  .changePhoto {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 45px;
    right: 20px;
    width: 35px;

    div {
      display: flex;
    }

    img {
      margin: auto;
      width: 66%;
    }
    .text {
      display: inline-block;
      font-size: 12px;
      width: 40px;
      transform: scale(0.8);
    }
  }

  .user {
    display: flex;
    position: absolute;
    right: 15px;
    top: 345px;
    // border: 1px solid red;
    color: #fff;

    h3 {
      font-size: 16px;
      margin: 10px 5px;
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 5px;
    }
  }

  .container {
    position: relative;
    top: 400px;
    left: 0px;
    width: 100%;
    // height: 100px;
    border-bottom: 1px solid rgba(156, 151, 151, 0.509);
    // background-color: cadetblue;

    .clerk {
      display: flex;
      width: 95%;
      margin: auto;
      padding: 10px 0;

      .img {
        flex: 0 0 15%;
        // background-color: rgb(42, 165, 116);
        img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
        }
      }

      .lists {
        flex: 0 0 85%;
        // background-color: rgb(153, 42, 165);

        h3 {
          margin-bottom: 10px;
          font-size: 16px;
          color: rgba(0, 217, 255, 0.728);
        }

        p {
          color: rgb(233, 227, 227);
        }

        .more {
          width: 100%;
          background-color: antiquewhite;

          .morelist {
            display: flex;
            position: absolute;
            right: 50px;
            width: 120px;
            height: 25px;
            line-height: 30px;
            background-color: #716d6d89;
           

            .item {
              position: absolute;
              right: 50px;
              bottom: 0px;

              #cvs {
                width: 100px;
                height: 100px;
              }
            }

            p {
              vertical-align: top;
              line-height: 25px;
              margin-left: 2px;
              width: 25px;
              font-size: 12px;
              transform: calc(0.5);
              display: inline-block;
            }
            .star {
              z-index: 2;
              margin:2px 10px 5px 10px;
              flex: 1;

              svg {
                width: 20px;

                &.like {
                  animation: beat 0.7s ease 0s infinite normal;
                  path {
                    fill: red;
                  }
                }
              }
              path {
                fill: #fff;
              }
            }
            .commen {
              margin:0px 5px 5px 0px;
              flex: 1;
            }
          }

          span {
            // display: inline-block;
            float: right;
            width: 30px;
            height: 20px;
            border-radius: 5px;
            text-align: center;
            line-height: 12px;
            font-size: 20px;
            color: rgba(0, 217, 255, 0.728);
            background-color: #716d6d89;
          }
        }
      }
    }
  }
  /* 显示动画效果 */
  .v-enter {
    opacity: 0;
  }
  .v-enter-active {
    transition: opacity 3s;
  }
  /* 隐藏动画效果 */
  .v-leave-to {
    opacity: 0;
  }
  .v-leave-active {
    transition: opacity 3s;
  }

  @keyframes beat {
    0% {
      transform: scale(1);
      box-shadow: 0 0 40px #d5093c;
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 70px #d5093c;
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 40px #d5093c;
    }
  }
}
</style>